Since 2015, JavaScript has improved immensely.
It’s much more pleasant to use it now than ever.
In this article, we’ll look at arrow functions and new OOP features in JavaScript.
Return Object Literals with Arrow Functions
If we want to return object literals with a single statement arrow function, we’ve to wrap the object we return with parentheses.
This way, it won’t be confused with blocks.
For example, we can write:
`const` `foo` `=` `x` `=>` `({` `bar:` 'baz' `});`
Then when we call foo() , we get { bar: 'baz' } returned.
Immediately-Invoked Arrow Functions
We can define immediately invoked arrow functions.
For example, we can write:
`(()` `=>` `{`
`return` 'foo'
`})();`
to define an arrow function and call it.
We still use semicolons to determine immediately invoked arrow functions.
We’ve to wrap the arrow function with parentheses.
Parenthesizing Arrow Function with Expression Bodies
We wrap our arrow function body with an expression by writing:
`const` `value` `=` `()` `=>` `(foo());`
This is the same as writing:
`const` `value` `=` `()` `=>` `foo();`
Arrow Functions and bind
We can use arrow functions instead of bind so that we don’t have to set our own this .
This is useful if we just want to reference this from the outside.
For example, instead of writing:
`obj.on('click',` `this.handleEvent.bind(this));`
We can write:
obj.on('anEvent', event => this.handleEvent(event));
Then we take the value of this from the outside.
We can also use arrow functions as callbacks.
For instance, we can write:
const set1 = new Set([1, 2, 3]);
const set2 = new Set([3, 9, 2]);
const intersection = [...set1].filter(a => set2.has(a));
We computed the intersection by spreading set1 into an array and then calling filter to return the items that are also in set2 .
Then intersection would be [2, 3] .
Partial Evaluation
bind lets us do partial evaluation of a function and return it.
With arrow functions, we can write:
`const` add`1` `=` `y` `=>` `add(1,` `y);`
instead of writing:
function add(x, y) {
return x + y;
}
const add1 = add.bind(undefined, 1);
to partially apply the function to add 2 numbers.
Arrow Functions vs Normal Functions
There’re significant differences between arrow functions and normal functions.
Arrow functions don’t have their own value of arguments, super, this, or new.target .
They also can’t be used as constructors.
It doesn’t have the hidden [[Construct]] property and the prototype property.
So we can’t use the new operator.
New OOP Features
There’re many new OOP features with modern JavaScript.
ES6 introduced the method definition shorthand:
const obj = {
foo(x, y) {
//...
}
};
We can also add the property value shorthand.
For instance, we can write:
const firstName = 'mary';
const lastName = 'smith';
const obj = {
firstName,
lastName
};
The code
const obj = {
firstName,
lastName
};
is the shorthand for:
const obj = {
firstName: firstName,
lastName: lastName
};
We can use the shorthand from now on.
Also, we have the computed property keys syntax.
For example, we can write:
const prop = 'bar';
const obj = {
[prop]: true,
['b' + 'ar']: 123
};
We pass in the key value into the square brackets to add them.
Conclusion
Arrow functions are useful in various contexts.
Modern JavaScript also has useful new features to make our lives easier.
